<template>
   <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" ref="formInline" label-width="76px" slot="form" 
            :rules="rules">
                 <!-- <el-row :gutter="41">
                    <el-col :span="8">
                         <el-form-item label="省份">
                                <province  v-model="formInline.provinceId" ></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                         <el-form-item label="市" > 
                                <city v-model="formInline.cityId" :province="formInline.provinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                         <el-form-item label="区县">
                                <region v-model="formInline.areaId" :city="formInline.cityId" ref="area"></region>
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="赠送时间"> 
                            <el-row>
                                <el-col :span="11">
                                    <el-date-picker v-model="formInline.giveTimeStart" :clearable='true' :editable="false" type="date" placeholder="选择开始日期" 
                                    :picker-options="formInline.pickerOptions1" 
                                    @change="startDateChange" style="width:100%">
                                  </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center">至</el-col>
                                <el-col :span="11">
                                    <el-date-picker v-model="formInline.giveTimeEnd" :clearable='true' :editable="false" type="date" placeholder="选择结束日期" 
                                    :picker-options="formInline.pickerOptions2" 
                                     @change="endDateChange" style="width:100%">
                                   </el-date-picker>
                                </el-col>
                            </el-row>              
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="e学云ID号" prop="eCode">
                            <el-input v-model="formInline.eCode" placeholder="请输入e学云ID号" :maxlength="10"></el-input>
                        </el-form-item>
                     </el-col>
                     <el-button type="primary" @click="search('formInline')">查询</el-button>
                </el-row>
                
                <!-- <div class="top-line">
                    <el-button type="primary" @click="search('formInline')">查询</el-button>
                </div> -->
            </el-form>
            <div class="table-title" slot="table-title">
                 <div class="btnPosition">
                    <el-button @click="creditSend">积分赠送</el-button>
                    <el-button @click="exportFile">下载表格</el-button>
                    <span class="creditPrice">积分余额:{{getPointNumber}}</span>
                </div>
            </div>
            <el-table :data="AnnounceList" border style="width: 100%" ref="multipleTable" v-loading="loading">
                <el-table-column align="center" label="赠送时间" min-width="180">
                     <template scope="scope">
                            {{scope.row.giveTime?scope.row.giveTime:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="e学云ID号"  min-width="120">
                      <template scope="scope">
                            {{scope.row.eCode?scope.row.eCode:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="用户名(姓名)"  min-width="120">
                     <template scope="scope">
                            {{scope.row.userName?scope.row.userName:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="手机号" min-width="126px">
                     <template scope="scope">
                            {{scope.row.phone?scope.row.phone:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="所在地区" min-width="220">
                    <template scope="scope">
                            {{scope.row.adress=='null_null_null'?'--':scope.row.adress?scope.row.adress:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="赠送积分" min-width="100">
                     <template scope="scope">
                            {{scope.row.point?scope.row.point:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="赠送缘由" min-width="120">
                     <template scope="scope">
                            {{scope.row.giveDesc?scope.row.giveDesc:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作人" min-width="120">
                    <template scope="scope">
                            {{scope.row.operatorName?scope.row.operatorName:'--'}}
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" 
                :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
       <!-- <addGoods :addData="addData"  @searchList='searchFetchData'> </addGoods> -->
    </div>
</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import TableLayout from 'components/TableLayout';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import { getPageList, getPoint} from 'api/creditShop';
import validate from '@/utils/validate';
import moment from 'moment';

export default {
    name: 'creditSendManageList',
    components: {TableLayout, province, city, region},
    data() {
        return {
            formInline: {
                eCode: '', // eId
                giveTimeStart: '', // 查询开始时间
                giveTimeEnd: '',
                pickerOptions1: {
                    disabledDate(time) {
                        return (time.getTime()) > (Date.now());
                    }
                },
                pickerOptions2: {
                    disabledDate(time) {
                        return (time.getTime()) > (Date.now());
                    }
                },
                provinceId: '', // 省份
                cityId: '', // 市区
                areaId: '' // 区县
            },
            getPointNumber: '',
            loading: true,
            orderStatusArr: [
                {status: '全部', statusId: ''},
                {status: '未发货', statusId: '0'},
                {status: '已发货', statusId: '1'}
            ],
          
            AnnounceList: [
            ],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            rules: {
                provinceId: [
                    [{required: true, message: '请输入省份' }]
                ],
                eCode: [...validate.exueCode()]
              
            }
        }
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        }),
        ...mapGetters([
            'uid',
            'token'
        ])
    },
    created() {
        this.searchFetchData()
    },
    methods: {
          // 全局获取行数
        ...mapActions(['ChangePageSize']),
        // 点击查询 
        search(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.listQuery.page=1;
                    this.loading = true;
                    this.searchFetchData();
                } else {
                    return false;
                }
            });
        },

        // 查询列表
        searchFetchData() {
            this.loading= true;
            let page = this.listQuery.page;
            let rows = this.config.pageSize;
            let eCode=this.formInline.eCode;
            let giveTimeStart=this.formInline.giveTimeStart;
            let giveTimeEnd=this.formInline.giveTimeEnd;
            let provinceId=this.formInline.provinceId;
            let cityId=this.formInline.cityId;
            let areaId=this.formInline.areaId;
            giveTimeStart=giveTimeStart?moment(giveTimeStart).format('YYYY-MM-DD'):'';
            giveTimeEnd=giveTimeEnd?moment(giveTimeEnd).format('YYYY-MM-DD'):'';
            getPageList(
                page,
                rows,
                eCode,
                giveTimeStart,
                giveTimeEnd,
                provinceId,
                cityId,
                areaId
            ).then(res => {
                this.getPoint()
                this.loading= false;
                this.AnnounceList = res.data.content.info;
                this.listQuery.total = parseInt(res.data.content.pagination.total);
            }).catch(() => {
                this.loading= false;
            });
        },
        // 获得积分余额
        getPoint() {
            getPoint().then(res => {
                this.getPointNumber=res.data.content
            }).catch(() => {
                this.$message.error(res.data.errorMsg)
            });
        },
        // 导出
        // exportFile() {
        //     // let List= this.AnnounceList;
        //     // outExcel(List).then(res => {
        //     //     this.$message.success('导出成功！')
        //     // }).catch(() => {
        //     //     this.$message.error(res.data.errorMsg)
        //     // });
        // },
        exportFile() {
            let AccessToken=this.token;
            let eCode = this.formInline.eCode;
            let giveTimeStart = this.formInline.giveTimeStart;
            let giveTimeEnd = this.formInline.giveTimeEnd;
            let provinceId = this.formInline.provinceId;
            let cityId = this.formInline.cityId;
            let areaId = this.formInline.areaId;
            giveTimeStart=giveTimeStart?moment(giveTimeStart).format('YYYY-MM-DD'):'';
            giveTimeEnd=giveTimeEnd?moment(giveTimeEnd).format('YYYY-MM-DD'):'';
            window.location.href = `${LOCAL_API.scy}/point/give/outExcel?AccessToken=${AccessToken}&eCode=${eCode}&giveTimeStart=${giveTimeStart}&giveTimeEnd=${giveTimeEnd}&provinceId=${provinceId}&cityId=${cityId}&areaId=${areaId}`
        },
        
        // 积分赠送
        creditSend() {
            this.$router.push({path: '/creditSendManage/creditSend'});
        },
        startDateChange(date) {
            this.formInline.pickerOptions2 = {
                disabledDate(time) {
                    return (time.getTime() < (new Date(date).getTime() - 864e5)) || (time.getTime() > new Date().getTime());
                }
            }
        },
        endDateChange(date) {
            this.formInline.pickerOptions1 = {
                disabledDate(time) {
                    return (time.getTime() > new Date(date).getTime());
                }
            } 
        },
         // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },

        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .creditPrice{
        font-size:14px;
        display:inline-block;
        padding-left:20px;
    }
}
</style>
